<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
     
    <title>简约计时</title>
    
    <link type="text/css" rel="stylesheet" href="${ctx}/resource/css/simple-stopwatch.css">
 	
 	<style>
 		th{
 			text-align:center;
 		}
 		.btn-body{
 			background: #f5f5f5;
 			text-align: center;
 		}
 		.btn-sty{
 			cursor:default;
 			margin: 4px 30px;
 		}
 		.row-top{
 			 margin-top:20px;
 		}
 	</style>
</head> 
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
  	<!-- 菜单及导航数据  -->
    <data id="info" nav="timer" menu="addTimer" service="计时服务" action="简约计时"></data>
  	<div class="row wrapper border-bottom white-bg page-heading animated rotateIn min-height" >
         <div class="col-lg-12 page-heading">
           	<!-- BEGIN FORM-->
            <div class="control-group" >
              	<div class="portlet box">
                   <div class="simple stopwatch">
						<div class="clock inactive z-depth-1">
							<span>00:00.00</span>
							<div class="overlay waves-effect"></div>
						</div>
					</div>
		    	</div>
              	<div class="portlet box ">
                   <div class="portlet-body btn-body">
				        <span id="control" class="btn btn-primary btn-sty"  >开始</span>
				        <span id="record" class="btn btn-danger btn-sty"  >重置</span>
				        <span id="save" class="btn btn-success btn-sty"  >保存</span>
				        <a class="btn btn-info btn-sty" href="${ctx}/center/timer/stopwatch/particle.html">炫酷计时</a>
				    </div>
			    </div> 
                <div class="portlet box">
				    <div class="portlet-body text-center">
				    	<div class="row row-top">
				    		<div class="col-md-1"></div> 
				    		<div class="col-md-10 ">
						        <table class="table table-hover ">
						            <thead> 
						                <tr class="info">
						                    <th>序号</th>
						                    <th>计次</th>
						                    <th class="hidden-480">计次时间</th>
						                </tr>
						            </thead>
						            <tbody>
						            </tbody>
						        </table> 
				    		</div>
			    			<div class="col-md-1"></div>
				    	</div>
				    </div>
				</div>
			</div>
		</div> 
	</div>
				 	
 	<js>  
		<script src="${ctx}/resource/js/util.js" type="text/javascript"></script>
		<script src="${ctx}/resource/js/simple-stopwatch.js"></script>
		
		<!-- END CORE PLUGINS -->
		<script src="${ctx}/resource/js/app.js"></script>
		<script type="text/javascript">
		layer.config({
		    extend: 'extend/layer.ext.js'
		});
		</script>
	</js>
 
</body>
</html>